<div class="content-section introduction">
    <div class="feature-intro">
        <h1>TreeTable <span>Lazy</span></h1>
        <p>Lazy mode is handy to deal with large datasets, instead of loading the entire data, small chunks of data is loaded by invoking corresponding callbacks everytime paging or sorting. In addition,
            children of a node can be loaded on demand at onNodeExpand event as well. Sample belows imitates lazy paging by using an in memory list..</p>
    </div>
</div>

<div class="content-section implementation">
    <div class="card">
        <p-treeTable [value]="files" [columns]="cols" [paginator]="true" [rows]="10" [lazy]="true" 
            (onLazyLoad)="loadNodes($event)" [totalRecords]="1000" [loading]="loading" (onNodeExpand)="onNodeExpand($event)">
            <ng-template pTemplate="header" let-columns>
                <tr>
                    <th *ngFor="let col of columns">
                        {{col.header}}
                    </th>
                </tr>
            </ng-template>
            <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
                <tr>
                    <td *ngFor="let col of columns; let i = index">
                        <p-treeTableToggler [rowNode]="rowNode" *ngIf="i == 0"></p-treeTableToggler>
                        {{rowData[col.field]}}
                    </td>
                </tr>
            </ng-template>
        </p-treeTable>
    </div>
</div>

<div class="content-section documentation">
    <p-tabView>
        <p-tabPanel header="Source">
            <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/treetable" class="btn-viewsource" target="_blank">
                <span>View on GitHub</span>
            </a>
            <a href="https://stackblitz.com/edit/primeng-treetablelazy-demo" class="btn-viewsource" style="margin-left: .5em;" target="_blank">
                <span>Edit in StackBlitz</span>
            </a>

<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-treeTable [value]="files" [columns]="cols" [paginator]="true" [rows]="10" [lazy]="true" 
    (onLazyLoad)="loadNodes($event)" [totalRecords]="1000" [loading]="loading" (onNodeExpand)="onNodeExpand($event)"&gt;
    &lt;ng-template pTemplate="header" let-columns&gt;
        &lt;tr&gt;
            &lt;th *ngFor="let col of columns"&gt;
                &#123;&#123;col.header&#125;&#125;
            &lt;/th&gt;
        &lt;/tr&gt;
    &lt;/ng-template&gt;
    &lt;ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns"&gt;
        &lt;tr&gt;
            &lt;td *ngFor="let col of columns; let i = index"&gt;
                &lt;p-treeTableToggler [rowNode]="rowNode" *ngIf="i == 0"&gt;&lt;/p-treeTableToggler&gt;
                &#123;&#123;rowData[col.field]&#125;&#125;
            &lt;/td&gt;
        &lt;/tr&gt;
    &lt;/ng-template&gt;
&lt;/p-treeTable&gt;
</app-code>
<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
export class TreeTableLazyDemo &#123;

    files: TreeNode[];

    cols: any[];

    totalRecords: number;

    loading: boolean;

    constructor(private nodeService: NodeService) &#123; &#125;

    ngOnInit() &#123;
        this.cols = [
            &#123; field: 'name', header: 'Name' &#125;,
            &#123; field: 'size', header: 'Size' &#125;,
            &#123; field: 'type', header: 'Type' &#125;
        ];

        //in a production application, retrieve the logical number of rows from a remote datasource
        this.totalRecords = 1000;

        this.loading = true;
    &#125;

    loadNodes(event) &#123;
        this.loading = true;

        //in a production application, make a remote request to load data using state metadata from event
        //event.first = First row offset
        //event.rows = Number of rows per page
        //event.sortField = Field name to sort with
        //event.sortOrder = Sort order as number, 1 for asc and -1 for dec
        //filters: FilterMetadata object having field as key and filter value, filter matchMode as value

        //imitate db connection over a network
        setTimeout(() => &#123;
            this.loading = false;
            this.files = [];

            for(let i = 0; i &lt; event.rows; i++) &#123;
                let node = &#123;
                    data: &#123;  
                        name: 'Item ' + (event.first + i),
                        size: Math.floor(Math.random() * 1000) + 1 + 'kb',
                        type: 'Type ' + (event.first + i)
                    &#125;,
                    leaf: false
                &#125;;

                this.files.push(node);
            &#125;
        &#125;, 1000);
    &#125;

    onNodeExpand(event) &#123;
        this.loading = true;

        setTimeout(() => &#123;
            this.loading = false;
            const node = event.node;

            node.children = [
                &#123;
                    data: &#123;  
                        name: node.data.name + ' - 0',
                        size: Math.floor(Math.random() * 1000) + 1 + 'kb',
                        type: 'File'
                    &#125;,
                &#125;,
                &#123;
                    data: &#123;  
                        name: node.data.name + ' - 1',
                        size: Math.floor(Math.random() * 1000) + 1 + 'kb',
                        type: 'File'
                    &#125;
                &#125;
            ];

            this.files = [...this.files];
        &#125;, 250);
        
    &#125;
&#125;
</app-code>   
        </p-tabPanel>
        <p-tabPanel header="StackBlitz">
            <ng-template pTemplate="content">
                <iframe src="https://stackblitz.com/edit/primeng-treetablelazy-demo?embed=1" style="width: 100%; height: 768px; border: none;"></iframe>
            </ng-template>
        </p-tabPanel>
    </p-tabView>
</div>